<template>
<!-- 图片上传组件 设置this.MAIN_URL的请求地址-->
<!-- 没绑定用户信息的上传组件 -->
  <div>
    <el-upload
      :action="MAIN_URL"
      :headers="requstHeader"
      :http-request="upload"
      :before-upload="beforeUp"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-progress="progress"
      :on-remove="handleRemove"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>
<script>
import Axios from "axios";
export default {
  data() {
    return {
      //请求的后端地址(比如：api/admin/....)
      MAIN_URL: "/flCompanyLogo",
      dialogImageUrl: "",
      dialogVisible: false,
      requstHeader: {
        Authorization: this.$store.state.user.token,
        Accept: "*/*",
        "Accept-Language": "zh-CN,zh;q=0.9,en;q=0.8",
        "X-Requested-With": "XMLHttpRequest",
        "Cache-Control": "no-cache",
        "Content-Type":
          "multipart/form-data; boundary=----WebKitFormBoundaryCte1eGub1BsCGnbu",
        Pragma: "no-cache"
      },
      imgArr: []
    };
  },
  methods: {
    beforeUp(file) {
      var formData = new FormData();
      formData.append("file", file);
      Axios.post(this.MAIN_URL, formData, { headers: this.requstHeader });
    },
    handleRemove(file, fileList) {
      /* 移除 */
    },
    handlePictureCardPreview(file) {
      /* 预览 */
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      Axios.post(this.MAIN_URL, formData, { headers: this.requstHeader });
    },
    progress() {
      console.log("上传中");
    },
    upload(res) {
      //上传成功时的回调
    }
  }
};
</script>